<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul {
			list-style:none;
		}
		a{
			text-decoration: none;
		}
		.box {
			width: 300px;
			height: 200px;
			overflow: hidden;
			position: relative;
			margin: 0 auto;
		}
		ul{
			width: 1800px;
			position: absolute;
		}
		ul li {
			width: 300px;
			float: left;
		}
		ul li a img {
			width: 300px;
			height: 200px;
		}
		.btn {
			position: absolute;
			right: 5px;
			bottom: 5px;
			z-index: 100;
		}
		.btn span{
			color: white;
			font-size: 12px;
			width: 15px;
			height: 15px;
			line-height: 15px;
			text-align: center;
			display: inline-block;
			background: black;
			opacity: 0.5;
			border-radius: 50%;
			margin-left: 2px;
			cursor: pointer;
		}
		.btn span.cur{
			opacity: 1;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="banner">
			<li><a href=""><img src="images/1.jpg" alt=""></a></li>
			<li><a href=""><img src="images/2.jpg" alt=""></a></li>
			<li><a href=""><img src="images/3.jpg" alt=""></a></li>
			<li><a href=""><img src="images/4.jpg" alt=""></a></li>
			<li><a href=""><img src="images/5.jpg" alt=""></a></li>
			<li><a href=""><img src="images/6.jpg" alt=""></a></li>
		</ul>
		<div class="btn"></div>
	</div>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		var banner = $('.banner')
		var lis = $('.banner li')
		var btn = $('.btn')
		var index = 0
		
		for(var i = 0; i < lis.length; i++){
			var span = $('<span>') // 创建span标签
			span.text(i+1) // 给span标签赋值
			btn.append(span) // 将当前的span标签放入btn元素里面
		}
		var spans = $('.btn span')
		spans.eq(index).addClass('cur') // 默认第一次添加样式

		function run () {
			if(index == lis.length) index = 0
			
			// banner.css('left', -1 * index * 300 + 'px')
			banner.animate({
				left: -1 * index * 300 + 'px'
			}, 500)

			// 先清除兄弟的样式，再给当前元素添加样式
			spans.eq(index).siblings().removeClass('cur')
			spans.eq(index).addClass('cur')

			index++
		}
		var T = setInterval(run, 1000)
		
		// 扩展： 鼠标移动到第n个小圆圈，第n张图片显示。
		// spans.hover(function(){
		// 	clearInterval(T)
		// 	index = $(this).index()
		// 	run()
		// }, function(){
		// 	T = setInterval(run, 1000)
		// })

		// 移动进轮播图里面动画停止，移除动画继续。点击按钮跳到第n张图。
		spans.click(function(){
			clearInterval(T)
			index = $(this).index()
			run()
		})

		banner.mouseover(function(){
			clearInterval(T)
		})
		banner.mouseout(function(){
			T = setInterval(run, 1000)
		})

	</script>	
</body>
</html>